<template>
  <!-- 全屏容器 -->
  <v-scale-screen width="1920" height="1080" fullScreen>
    <div class="container">
      <dv-border-box-11 title="健康证查询列表" v-if="changeDates">
        <div class="borderBox">
          <div
            class="dateTime"
            style="
              color: white;
              position: absolute;
              top: 80px;
              right: 150px;
              font-weight: bolder;
              font-size: 18px;
            "
          >
            {{ formattedDate }}
          </div>
          <div
            style="
              height: 13%;
              display: flex;
              align-items: flex-end;
              padding: 20px 155px 40px;
            "
          >
            <i
              class="el-icon-d-arrow-left"
              style="
                color: aliceblue;
                font-size: 20px;
                position: absolute;
                top: 80px;
                left: 35px;
              "
              @click="goback"
              >返回</i
            >
            
            <div class="block" style="display: flex; margin-right: 25px">
              <el-input
                @change="nameChange"
                placeholder="请输入关键词"
                v-model="requestData.search_key"
                clearable
              >
              </el-input>
              <el-button
                style="margin-left: 20px; width: 220px"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >人员查询</el-button
              >
            </div>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="clearAll"
              >重置</el-button
            >
            <div style="color: white;margin-left: 30px;font-weight: bolder;">
              <span>健康证到期日期查询：</span>
              <el-date-picker
                value-format="yyyy-MM-dd"
                @change="changeDate"
                v-model="value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 300px; margin-right: 25px"
              >
              </el-date-picker>
            </div>
            <div style="color: gray;font-weight: bolder;position: absolute;right: 150px;">健康证总数：{{ total }}</div>
          </div>
          <!-- 升降序图标 -->
          <div
            style="position: absolute; top: 215px; z-index: 99; right: 362px"
            @click="changeAsc"
          >
            <img
              src="../assets/image/jiangxu.png"
              style="width: 25px; height: 25px"
              v-if="isAsc"
            />
            <img
              src="../assets/image/shengxu.png"
              style="width: 25px; height: 25px"
              v-else
            />
          </div>
          <div style="width: 85%; margin: 0 auto; height: 85%">
            <tableCom
              v-if="changeDates"
              :tableTitle="tableTitle"
              :tableDatas="tableSource"
              :stockHeight="stockHeight"
              class="left-three-item"
            >
              <template #pic_image="{ scope }">
                <div>
                  <el-popover
                    placement="left-start"
                    width="800"
                    trigger="click"
                  >
                    <el-row>
                      <el-col>
                        <el-card>
                          <img
                            width="100%"
                            :src="scope.row.pic_image"
                            class="image"
                          />
                        </el-card>
                      </el-col>
                    </el-row>
                    <el-image
                      style="width: 70px; height: 50px"
                      :src="scope.row.pic_image"
                      slot="reference"
                    >
                      <div slot="error" class="image-slot"></div>
                    </el-image>
                  </el-popover>
                </div>
              </template>
            </tableCom>
          </div>
          <el-pagination
            :page-size="8"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
            style="position: absolute; right: 145px; bottom: 90px"
            background
            layout="prev, pager, next"
            :total="pageTotal"
          ></el-pagination>
        </div>
      </dv-border-box-11>
    </div>
  </v-scale-screen>
</template>
<script>
import ChartBox from "../components/chartBox.vue";
import Chart from "../components/chart.vue";
import { getHealthTable } from "../api/api";
import { baseUrl } from "../utils/request";

export default {
  data() {
    return {
      total:'',
      isAsc: true,
      stockHeight: 760,
      currentDate: new Date(),
      currentPage: 1,
      pageTotal: 0,
      changeDates: true, //控制表格刷新
      requestData: {
        start_date: "",
        end_date: "",
        page: 1,
        search_key: "",
        order: "asc",
        orderby: "end_date",
      },
      value: "",
      tableSource: [],
      tableTitle: [],
    };
  },
  computed: {
    formattedDate: function () {
      var year = this.currentDate.getFullYear();
      var month = this.currentDate.getMonth() + 1;
      var day = this.currentDate.getDate();
      var weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var weekday = weekdays[this.currentDate.getDay()];
      return year + "年" + month + "月" + day + "日 " + weekday;
    },
  },
  methods: {
    changeAsc() {
      this.isAsc = !this.isAsc;
      this.requestData.order = this.isAsc ? "asc" : "desc";
      this.getHealthTables();
    },
    clearAll() {
      this.requestData = {
        start_date: "",
        end_date: "",
        page: 1,
        search_key: "",
      };
      this.value = "";
      this.getHealthTables();
    },
    handleCurrentChange(val) {
      this.requestData.page = val;
      this.getHealthTables();
      this.requestData.page = 1;
    },
    search() {
      this.getHealthTables();
    },
    // 健康证搜索框change事件
    nameChange(e) {
      this.requestData.search_key = e;
    },
    // 时间选择器change事件
    changeDate(e) {
      this.requestData.start_date = e[0];
      this.requestData.end_date = e[1];
      this.getHealthTables();
    },
    goback() {
      this.$router.push("/larges");
    },
    async getHealthTables() {
      const res = await getHealthTable(this.requestData);
      this.total = res.data.data[0].total
      this.tableSource = res.data.data[0].data.map((item) => {
        return {
          ...item,
          pic_image: item.pic_image.includes("http")
            ? item.pic_image
            : baseUrl + item.pic_image,
        };
      });
      this.pageTotal = res.data.data[0].total;
    },
  },
  components: { ChartBox, Chart },
  created() {
    this.getHealthTables();
    this.tableTitle = [
      {
        name: "健康证",
        width: "250",
        value: "pic_image",
      },
      {
        name: "姓名",
        width: "220",
        value: "name",
      },
      {
        name: "健康证编号",
        width: "250",
        value: "code",
      },
      {
        name: "发证单位",
        width: "",
        value: "publish",
      },
      {
        name: "健康证到期日期",
        width: "250",
        value: "end_date",
      },
      {
        name: "到期日期提醒",
        width: "200",
        value: "due_days",
      },
    ];
  },
  mounted() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  background: url("../assets/image/bg.577ccc4c.jpg");
  .borderBox {
    height: 100%;
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .el-table th.el-table__cell.is-leaf {
  height: 40px;
  border: none !important;
  color: white;
  font-size: 18px;
}
::v-deep .el-button--mini {
  font-size: 15px;
}

.container .el-table__body-wrapper::-webkit-scrollbar {
  width: 0.375rem !important;
}
// 时间选择器样式
.container .el-range-editor.el-input__inner {
  background-color: rgb(1, 52, 92);
  color: white;
}
.container .el-range-editor span {
  color: white;
  font-weight: bolder;
}
.container .el-date-editor .el-range-input {
  background-color: rgb(1, 52, 92);
  color: white;
}
.container .el-input--suffix .el-input__inner {
  background-color: rgb(1, 52, 92);
  color: white;
}
::v-deep .container .el-date-editor .el-range-input {
  border-radius: 5px;
}
</style>
